@mixin pseudo($direction: bottom, $num, $borderWidth: 8px) {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-width: $borderWidth; // 抽为参数，方便调整三角形大小
    border-style: solid;
    
    // 1. 提取公共方向逻辑（上下/左右）
    $carryTop: $direction == top or $direction == topLeft or $direction == topRight; // 是否携带 top
    $carryBottom: $direction == bottom or $direction == bottomLeft or $direction == bottomRight; // 是否携带 bottom
    $carrayLeft: $direction == left or $direction == leftTop or $direction == leftBottom; // 是否携带 left
    $carrayRight: $direction == right or $direction == rightTop or $direction == rightBottom; // 是否携带 right
    $isRow: $direction == top or $direction == bottom;
    $isLeft: $direction == topLeft or $direction == bottomLeft;
    $isRight: $direction == topRight or $direction == bottomRight;
    $isTop: $direction == leftTop or $direction == rightTop;
    $isBottom: $direction == leftBottom or $direction == rightBottom;
    $isColumn: $direction == left or $direction == right;
    
    // 2. 统一处理垂直方向（top/bottom）和边框颜色
    @if $carryTop {
      top: $num;
      border-color: transparent transparent #fff transparent; // 向上的三角形（下边框有色）
    } @else if $carryBottom {
      bottom: $num;
      border-color: #fff transparent transparent transparent; // 向下的三角形（上边框有色）
    } @else if $carrayLeft {
      left: $num;
      border-color: transparent #fff transparent transparent; // 向左的三角形（右边框有色）
    } @else if $carrayRight {
      right: $num;
      border-color: transparent transparent transparent #fff; // 向右的三角形（左边框有色）
    }
    
    // 3. 统一处理水平方向（left/right/center）
    @if $isLeft {
      left: calc(var(--radius) / 2); // 左对齐（关联父元素圆角）
    } @else if $isRight {
      right: calc(var(--radius) / 2); // 右对齐（关联父元素圆角）
    } @else if $isRow {
      left: 50%;
      transform: translateX(-50%); // 水平居中
    } @else if $isTop {
      top: calc(var(--radius) / 2); // 上对齐（关联父元素圆角）
    } @else if $isBottom {
      bottom: calc(var(--radius) / 2); // 下对齐（关联父元素圆角）
    } @else if $isColumn {
      top: 50%;
      transform: translateY(-50%); // 垂直居中
    }
}
  
.tour-popover {
    pointer-events: auto;
    .tour-content {
        --radius: 8px;
        position: absolute;
        z-index: 10000;
        background: #fff;
        border-radius: var(--radius);
        transition: opacity 0.2s;
        min-width: 250px;
        overflow: visible !important;
        .tour-middle {
            padding: 12px;
            position: relative;
            overflow: visible !important;
        }
        // 三角向上
        .triangle-bottom {
            &::after {
                @include pseudo(top, -14px);
            }
        }
        .triangle-bottomLeft {
            &::after {
                @include pseudo(topLeft, -14px);
            }
        }
        .triangle-bottomRight {
            &::after {
                @include pseudo(topRight, -14px);
            }
        }
        // 三角向下
        .triangle-top {
            &::before {
                @include pseudo(bottom, -14px);
            }
        }
        .triangle-topLeft {
            &::after {
                @include pseudo(bottomLeft, -14px);
            }
        }
        .triangle-topRight {
            &::after {
                @include pseudo(bottomRight, -14px);
            }
        }
        // 三角向左
        .triangle-right {
            &::before {
                @include pseudo(left, -14px);
            }
        }
        .triangle-rightTop {
            &::after {
                @include pseudo(leftTop, -14px);
            }
        }
        .triangle-rightBottom {
            &::after {
                @include pseudo(leftBottom, -14px);
            }
        }
        // 三角向右
        .triangle-left {
            &::before {
                @include pseudo(right, -14px);
            }
        }
        .triangle-leftTop {
            &::after {
                @include pseudo(rightTop, -14px);
            }
        }
        .triangle-leftBottom {
            &::after {
                @include pseudo(rightBottom, -14px);
            }
        }
    }
    // 消失时不要动画
    .fade-out {
        transition: none;
    }
}